<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <script src = "js/DivChange.js"></script>
    <script>
        //链式运动,套娃函数,运动1完成后继而执行运动2,运动3...在原有的changeDiv框架上进行改造
        //官方说法:在上一次的函数结束后调用下一次的函数
        window.onload = function () {
            let oDiv = document.getElementById('div1');
            oDiv.timer = null;

            oDiv.onmouseenter = function() {
                divChange(oDiv,oDiv.offsetWidth,oDiv.offsetWidth+200,'width',function () {
                    divChange(oDiv,oDiv.offsetHeight,oDiv.offsetHeight+200,'height',function () {
                        divChange(oDiv,0.2,1,'opacity',function () {},20)
                    })
                })
            };


            oDiv.onmouseleave = function() {
                divChange(oDiv,1,0.2,'opacity',function () {
                    divChange(oDiv,oDiv.offsetHeight,oDiv.offsetHeight-200,'height',function () {
                        divChange(oDiv,oDiv.offsetWidth,oDiv.offsetWidth-200,'width')
                    })
                },20)
            };

        }



    </script>
    <style>
        #div1 {
            background-color: sienna;
            height: 20px;
            width: 20px;
            opacity: 0.2;

        }

    </style>

</head>

<body>

<div>
    <div id="div1">

    </div>

</div>

</body>
</html>